<template>
    <el-tree-select
    v-model="modelValue"
    :placeholder="placeholder || $t('search.placeholder')"
    :data="options"
    :props="treeProps"
    :multiple="multiple"
    clearable
    @change="updateValue"
    filterable
  />
</template>

<script setup lang="ts">
import i18n from "@/lang/index";
const $t = i18n.global.t;
const props = defineProps({
    modelValue: {
        type: String || Array,
    },
    placeholder: {
        type: String,
        default: '',
    },
    multiple: {
        type: Boolean,
        default: false,
    },
    options: {
        type: [Array, Object, Function],
    },
    treeProps: {
        type: Object,
        default: {
            label: 'label',
            children: 'children',
            value: 'value'
        },
    },
})
// const value = ref('')
const { modelValue, placeholder, options, treeProps } = toRefs(props)
// console.log('------------>',options.value);

const emits = defineEmits(['update:modelValue'])
//   watch(value, (newV) => {
//     emits('update:modelValue', newV)
// })
const updateValue = (event) => {
    console.log('update:modelValue',event);
    
    emits('update:modelValue', event);
}
</script>

<style lang="scss" scoped>
.select {
    width: 100%;
}
</style>
